<template>
    <view class="upper">
        <!-- 轮播图 -->
        <view class="swiper">
            <swiper class="swiper" indicator-active-color="#fff" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500" :circular="true">
                <swiper-item v-for="(it, index) in goodxs.images" :key="index">
                    <image class="swiper-image" :src="it" mode="aspectFill"></image>
                </swiper-item>
            </swiper>
        </view>
        <view class="btm">
            <view class="pric">
                <view class="sp-price">
                    ￥
                    <text>{{ goodxs.price }}</text>
                </view>
                <view class="pric-text">{{ goodxs.title }}{{ goodxs.subtitle }}</view>
            </view>
            <!-- <view style="height: 800rpx; width: 100%; background-color: pink"></view> -->
            <image style="height: 600rpx; width: 100%" :src="goodxs.image" mode="aspectFit"></image>
            <image style="height: 600rpx; width: 100%" v-for="(it, index) in goodxs.images" :key="index" :src="it" mode="aspectFit"></image>
        </view>
        <!-- 底部 -->
        <view class="fotter">
            <view class="purchase add" @click="getAdd('addCar')">加入购物车</view>
            <view class="purchase" @click="getAdd('buy')">立即购买</view>
        </view>
    </view>
    <!-- 支付弹出层 -->
    <wd-popup v-model="carShow" position="bottom" custom-style="border-radius:15rpx;">
        <view class="car-popu">
            <view class="guige">规格</view>
            <view class="flex">
                <!-- <view :class="{ active: selectedIndex == index, 'felx-li': true }" @click="norms(item, index)" v-for="(item, index) in goodxs.skus">{{ item.name }}</view> -->
                <view :class="{ active: true, 'felx-li': true }" v-for="(item, index) in goodxs.skus">{{ item.name }}</view>
            </view>
            <view class="fenlei">分类</view>
            <view class="flex">
                <view :class="{ actives: selected == index, 'felx-li': true }" @click="man(it, index)" v-for="(it, index) in fenlei">{{ it.goods_sku_text }}</view>
            </view>
            <view class="disflexs">
                <image v-if="count != 1" @click="jian" class="jia1" src="@/static/jian.png" mode=""></image>
                <view class="zi">{{ count }}</view>
                <image @click="jia" class="jia1" src="@/static/jia1.png" mode=""></image>
            </view>
            <view class="botm">
                <view class="qux" @click="carShow = false">取消</view>
                <view class="quer" @click="carLs">确认</view>
            </view>
        </view>
    </wd-popup>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { goodsxq, carUPdate, user, getCreate } from '@/api/index.js';
import { utils } from '@/utils/utils.js';
const carShow = ref(false); //加入购物车弹窗
const goodId = ref(''); //商品详情id
const goodxs = ref({}); //商品详情
const fenlei = ref([]); //分类
const selected = ref(-1); //分类样式
const addCars = ref({}); //加入购物车参数
const count = ref(1); //商品的数量
const buyoradd = ref(''); //判断是加入购物车（addCar）还是购买商品 （buy）
const userProfile = ref({}); //存储用户信息
const parms = ref({
    // voucher: '', //代金券
    list: [
        {
            shop_id: '', //店铺id
            remark: '',
            goods_list: [
                {
                    goods_id: '', //商品id
                    goods_sku_price_id: '', //价格sku id
                    goods_num: '' //数量
                }
            ]
        }
    ]
}); //创建订单参数
onLoad((options) => {
    if (options.ids) {
        goodId.value = options.ids;
    }
    getGood(); //商品详情
    userInfo(); //获取用户信息
});
// 点击加入购物车和购买商品
const getAdd = (value) => {
    buyoradd.value = value;
    carShow.value = true;
};

// 点击确认加入购物车
const carLs = async () => {
    if (selected.value == -1) {
        utils('请选择分类');
    } else {
        // 加入购物车
        if (buyoradd.value == 'addCar') {
            const ret = await carUPdate(addCars.value.goods_id, count.value, 'inc', addCars.value.id);
            if (ret.code == 1) {
                utils(ret.msg);
            } else {
                utils();
            }
        } else {
            // 购买
            const ret = await getCreate(JSON.stringify(parms.value));
            if (ret.code == 1) {
                // 跳转到创建订单页面
                uni.navigateTo({
                    url: `/pages/sub/daipayment?id=${ret.data[0].id}`
                });
            } else {
                utils(ret.msg);
            }
            console.log('购买商品');
        }
        carShow.value = false; //关闭弹窗
    }
};
//点击分类
const man = (it, index) => {
    console.log('分类', it, index);
    selected.value = index; //选择的动态样式
    addCars.value = it; //加入购物车参数
    goodxs.value.price = it.price; //选择不同规格后显示页面的价格
    // 下面是创建订单的参数
    parms.value.list[0].goods_list[0].goods_id = it.goods_id;
    parms.value.list[0].goods_list[0].goods_sku_price_id = it.id;
    parms.value.list[0].goods_list[0].goods_num = count.value;
};

// 获取详情
const getGood = async () => {
    const ret = await goodsxq(goodId.value);
    console.log('商品详情', ret);
    if (ret.code == 1) {
        goodxs.value = ret.data;
        fenlei.value = ret.data.skuPrice; //分类
        parms.value.list[0].shop_id = ret.data.shop_id; //店铺id
        console.log(123132, goodxs.value);
    } else {
        utils();
    }
};
// 获取用户信息
const userInfo = async () => {
    const ret = await user();
    if (ret.code == 1) {
        userProfile.value = ret.data;
        // parms.value.voucher = ret.data.voucher; //代金券
        console.log('个人信息', userProfile.value);
    } else {
        utils('数据加载失败！');
    }
};
// 点击减号
const jian = () => {
    count.value--;
};
// 点击加号
const jia = () => {
    count.value++;
};
</script>

<style lang="scss" scoped>
.active {
    background-color: rgba(248, 187, 79, 0.05) !important;
    color: #f8bb4f !important;
}
.actives {
    background-color: rgba(248, 187, 79, 0.05) !important;
    color: #f8bb4f !important;
}
// 加入购物车弹窗
.car-popu {
    .disflexs {
        display: flex;
        align-content: center;
        justify-content: flex-end;
        .zi {
            margin: 0 15rpx;
        }
        .jia1 {
            width: 40rpx;
            height: 40rpx;
        }
    }
    .botm {
        .quer {
            border: 2rpx solid #f8bb4f;
            width: 216rpx;
            height: 72rpx;
            border-radius: 50rpx;
            line-height: 72rpx;
            text-align: center;
            background: #f8bb4f;
            color: #fff;
        }
        .qux {
            border: 2rpx solid #f8bb4f;
            width: 216rpx;
            height: 72rpx;
            border-radius: 50rpx;
            line-height: 72rpx;
            text-align: center;
            color: #f8bb4f;
            margin-right: 46rpx;
        }
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        margin-top: 50rpx;
    }
    .fenlei {
        margin-top: 16rpx;
        margin-bottom: 20rpx;
    }
    .flex {
        .felx-li {
            padding: 14rpx 50rpx;
            border: 1rpx solid #f1f1f1;
            background: #f5f7fa;
            border-radius: 50rpx;
            margin-right: 18rpx;
            margin-bottom: 20rpx;
        }
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .guige {
        margin-bottom: 20rpx;
    }
    padding: 26rpx 30rpx 30rpx 30rpx;
}

// 支付弹窗
.popup {
    .btn {
        color: #ffffff;
        font-size: 32rpx;
        width: 670rpx;
        height: 98rpx;
        line-height: 98rpx;
        background: #f8bb4f;
        text-align: center;
        border-radius: 20rpx;
        margin: 180rpx auto 20rpx;
    }
    .conter {
        .box-btm {
            .btm-left {
                display: flex;
                align-items: center;
            }
            .img {
                width: 52rpx;
                height: 45rpx;
                margin-right: 14rpx;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 32rpx;
            color: #32394b;
            font-size: 30rpx;
        }
        .flex {
            .left {
                .balance {
                    color: #4e576e;
                }
                .flex-img {
                    width: 48rpx;
                    height: 42rpx;
                    margin-right: 14rpx;
                }
                display: flex;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 108rpx;
            border-bottom: solid 2rpx #dfe3e7;
            color: #32394b;
            font-size: 30rpx;
        }
        padding: 38rpx 24rpx 0 24rpx;
        font-size: 32rpx;
    }
    .top {
        .mony {
            color: #ff9b29;
            margin-left: 16rpx;
        }
        .txt {
            color: #ff9b29;
            font-size: 64rpx;
        }
        text-align: center;
        height: 182rpx;
        line-height: 182rpx;
        color: #32394b;
        font-size: 32rpx;
        border-bottom: solid 20rpx #f6f8fa;
    }
}
.upper {
    // 底部、
    .fotter {
        .purchase {
            border-radius: 50rpx;
            width: 220rpx;
            height: 80rpx;
            color: #ffffff;
            background-color: #f8bb4f;
            text-align: center;
            line-height: 80rpx;
        }
        .add {
            background-color: #ff9b29;
            margin-right: 12rpx;
        }
        padding: 10rpx 16rpx 10rpx 0;
        position: fixed;
        bottom: 0;
        background-color: #fff;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    .btm {
        .pric {
            .pric-text {
                font-size: 29rpx;
            }
            .sp-price {
                color: #f84834;
                font-size: 37rpx;
            }
            width: 100%;
            background-color: #fff;
            border-radius: 15rpx;
            padding: 64rpx 46rpx 30rpx 28rpx;
            margin-bottom: 36rpx;
        }
        padding: 32rpx 22rpx 0 22rpx;
    }
    .swiper {
        height: 800rpx;
        width: 100vw;
        .swiper-image {
            width: 100vw;
            height: 800rpx;
        }
    }
    min-height: 100vh;
    padding-bottom: 200rpx;
    background-color: #fafafa;
}
</style>
